<template>
  <el-row>
    <el-card>
      {{ $t('productCenter.appConfig.calendar.state') }} ：
      {{ $t('productCenter.appConfig.calendar.status')[chooseItem.value] }}
      <el-button type="primary" style="margin-left: 30px" @click="editCalendar">{{ $t('productCenter.appConfig.calendar.edit') }}</el-button>
    </el-card>
    <el-card v-loading="loading">
      <el-calendar
        id="calendar"
        v-model="value"
        :first-day-of-week="7"
      >
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          <div :class="arr.includes(data.day) ? 'is-selected' : ''" style="width: 100%;height: 69px">
            <div>{{ data.day.split('-').slice(2).join('-') }}</div><br>
            <div>{{ arr.includes(data.day) ? $t('productCenter.appConfig.calendar.rest') : '' }}</div>
          </div>
        </template>
      </el-calendar>
    </el-card>
    <calendar-dialog
      ref="calendarEdit"
      :show-dialog="editDialog"
      :choose-item="chooseItem"
      @change-dialog="changeDialog"
      @edit-success="editSuccess"
    />
  </el-row>
</template>

<script>
import { getCalendar } from '@/api/product'
import { formatDate } from '@/utils/method'
import CalendarDialog from '@/components/product/calendar-dialog'
export default {
  name: 'Calendar',
  components: {
    CalendarDialog
  },
  data() {
    return {
      loading: false,
      value: new Date(),
      arr: [],
      chooseItem: {
        value: null
      },
      editDialog: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      const prevBtnNth = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)')
      prevBtnNth.addEventListener('click', () => {
        this.getData(formatDate(new Date(this.value), 'yyyy-MM'))
      })
      // 点击后一个月
      const prevBtnLast = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:last-child')
      prevBtnLast.addEventListener('click', () => {
        this.getData(formatDate(new Date(this.value), 'yyyy-MM'))
      })
      const listNext = document.getElementsByClassName('next')
      const that = this
      listNext.forEach(v => {
        v.onclick = function() {
          that.getData(formatDate(new Date(that.value), 'yyyy-MM'))
        }
      })
      const listPrev = document.getElementsByClassName('prev')
      listPrev.forEach(v => {
        v.onclick = function() {
          that.getData(formatDate(new Date(that.value), 'yyyy-MM'))
        }
      })
    })
    this.getData(formatDate(new Date(), 'yyyy-MM'))
  },
  methods: {
    editCalendar() {
      this.editDialog = true
      this.$refs.calendarEdit.nextTick()
    },
    getData(month) {
      this.loading = true
      const data = {
        yearMonth: month
      }
      getCalendar(data)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.chooseItem.value = res.data[0].status
            res.data.forEach(v => {
              if (v.state === 1) {
                this.arr.push(v.time)
              }
            })
            this.arr = Array.from(new Set(this.arr))
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    },
    changeDialog(param) {
      this.editDialog = param
    },
    editSuccess() {
      this.arr = []
      this.getData(formatDate(new Date(), 'yyyy-MM'))
    }
  }
}
</script>

<style lang="scss" scoped>
  .is-selected {
    color: #1989FA;
    div:last-child{
      font-size: 12px;
    }
  }
  .el-card{
    margin: 10px;
  }
</style>
